<template>
	<view class="wrap">
		<u-navbar :is-back="false" :title="title" :border-bottom="false"></u-navbar>
		<view class="top"></view>
		<view class="content">
			<view class="title">欢迎登录Sawtooth</view>
			<view class="imgDiv">
				<image :src="img"></image>
			</view>
			<u-button class="getAuthorize"
				:custom-style="{backgroundColor: this.$store.state.vuex_themeColor,color: '#ffffff'}" @click="wxLogin">
				登录</u-button>
			<view class="alternative">
				<view class="later" @click="onlaterLogin">稍后登录</view>
			</view>
		</view>
		<view class="buttom">
			<view class="hint">
				登录代表同意
				<text class="link">Sawtooth用户协议、隐私政策，</text>
				并授权使用您的Sawtooth账号信息（如昵称、头像、收获地址）以便您统一管理
			</view>
		</view>
	</view>
</template>

<script>
	import logo from '@/static/logo.png'
	export default {

		data() {
			return {
				img: logo
			}
		},
		computed: {
			title() {
				return '小程序登录'
			}
		},
		methods: {
			wxLogin() {
				// 获取code 小程序专有，用户登录凭证。
				if (uni.getUserProfile) {
					uni.getUserProfile({
						desc: "获取用户基本资料",
						lang: 'zh_CN',
						success: (code_res) => {
							//获取成功基本资料后开启登录，因为基本资料首先要授权
							if (code_res.errMsg == "getUserProfile:ok") {
								// 赋值用户信息
								this.$u.vuex('vuex_user', code_res.userInfo);
								this.$u.vuex('vuex_hasLogin', true);
								uni.navigateBack();
							} else {
								uni.showModal({
									title: code_res.errMsg,
									showCancel: false
								})
							}
						},
						fail: (res) => {
							uni.showModal({
								title: "用户拒绝授权",
								showCancel: false
							})
						}
					});
				}
			},
			onlaterLogin() {
				uni.navigateBack();
			}
		}
	};
</script>

<style lang="scss" scoped>
	.wrap {
		font-size: 28rpx;

		.content {
			width: 600rpx;
			margin: 80rpx auto 0;

			.title {
				text-align: center;
				font-size: 60rpx;
				font-weight: 500;
				margin-bottom: 100rpx;
			}

			input {
				text-align: left;
				margin-bottom: 10rpx;
				padding-bottom: 6rpx;
			}

			.tips {
				color: $u-type-info;
				margin-bottom: 60rpx;
				margin-top: 8rpx;
			}

			.getAuthorize {
				background-color: rgb(0, 85, 255);
				color: $u-tips-color;
				border: none;
				font-size: 30rpx;
				padding: 12rpx 0;

				&::after {
					border: none;
				}

				margin-top: 400rpx;
			}

			.later {
				text-align: center;
				margin-top: 15rpx;
			}

			.alternative {
				color: $u-tips-color;
				justify-content: space-between;
				margin-top: 30rpx;
			}
		}

		.imgDiv {
			width: 200rpx;
			height: 200rpx;
			margin: 50px auto;

			image {
				width: 100%;
				height: 100%;
				border-radius: 50%;
			}
		}

		.buttom {
			.hint {
				padding: 20rpx 40rpx;
				font-size: 24rpx;
				color: $u-tips-color;

				.link {
					color: $u-type-warning;
				}
			}
		}
	}
</style>
